<template>
  <div class="mod-config">
    <!-- <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <ve-ring :data="chartData" ref="ring" height="200px" :extend="chartExtend" :settings="chartSettings" :loading="loading" :grid="grid" legend-position="right"></ve-ring>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <ve-histogram :data="histogramData" ref="histogram" :title="histogramTitle" :settings="histogramSettings" height="200px"  :extend="histogramExtend" :grid="grid"></ve-histogram>
        </el-card>
      </el-col>
    </el-row> -->
    <el-form :inline="true" class="queryForm">
      <el-form-item>
        <el-button size="mini" icon="iconfont iconsoushuo" @click="queryHandle()">搜索</el-button>
        <el-button size="mini" v-if="isAuth('certificate:certificateInfo:delete')" type="warning" @click="disabledHandle()">一个月内快到期</el-button>
        <el-button size="mini" v-if="isAuth('certificate:certificateInfo:delete')" type="danger" @click="disabledHandle()">已到期</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      height="680"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="certificateType"
        header-align="center"
        align="center"
        width="50"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 2" style="color:green;">
            <el-tooltip placement="top">兼职</el-tooltip>
            <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#iconjianzhi"></use>
            </svg>
          </span>
          <span v-else style="color:green;">
            <el-tooltip placement="top">在职员工</el-tooltip>
            <svg class="iconPro" aria-hidden="true">
              <use xlink:href="#iconcompany"></use>
            </svg>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        width="50"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 11" style="color:#f56c6c;">
            借入
          </span>
          <span v-else-if="scope.row.type === 12" style="color:#f56c6c;">
            归还
          </span>
          <span v-else-if="scope.row.type === 21" style="color:#fc8e2d;">
            借出
          </span>
          <span v-else-if="scope.row.type === 22" style="color:#fc8e2d;">
            收回
          </span>
          <span v-else-if="scope.row.type === 3" style="color:#f56c6c;">
            流转
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        width="80"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="idCard"
        header-align="center"
        align="center"
        width="180"
        label="身份证号">
      </el-table-column>
      <el-table-column
        prop="idType"
        header-align="center"
        align="center"
        width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        header-align="center"
        align="center"
        width="180"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        header-align="center"
        align="center"
        width="150"
        label="证书编号">
      </el-table-column>
      <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        width="120"
        label="证书到期日期"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="toUserName"
        header-align="center"
        align="center"
        width="80"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="toUserMobile"
        header-align="center"
        align="center"
        width="130"
        label="联系人手机号">
      </el-table-column>
      <el-table-column
        prop="transactionTime"
        header-align="center"
        align="center"
        width="120"
        label="借入/借出时间"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="validityEndTime"
        header-align="center"
        align="center"
        width="120"
        label="到期日期"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="deptName"
        header-align="center"
        align="center"
        width="110"
        label="保管单位名称">
      </el-table-column>
        <!-- fixed="right" -->

      <el-table-column
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" style="color:#fc8e2d;" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[50, 100, 200]"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
  </div>
</template>

<script>
  import merge from 'lodash/merge'
  import AddOrUpdate from './../certificate/certitrans/certitrans-info'
  import QueryModel from './../certificate/certitrans/query-model'
  import echarts from 'echarts'
  export default {
    data() {
      this.chartSettings = {
        roseType: 'radius',
        radius: 60,
        offsetY: 100,
        offsetX: 60
      }
      this.toolbox = {
        feature: {
          magicType: {type: ['line', 'bar']},
          saveAsImage: {}
        }
      }
      this.grid={
        y:30,
        y2:0
      }
      this.histogramTitle = {
        left: 'left',
        top: 5,
        textStyle: {
          color: '#333333',
          fontWeight: 'normal'
        }
      },
      this.histogramSettings = {
        metrics: ['借出', '借入'],
        dimension: ['d']
      }
      return {
        queryModelVisible: false,
        activeName: 'threejob',
        chartData: {
          columns: ['type', 'num'],
          rows: [
            { 'type': '空闲', 'num': 1393 },
            { 'type': '借出', 'num': 3530 },
            { 'type': '投标中', 'num': 2923 },
            { 'type': '项目中', 'num': 1723 }
          ]
        },
        histogramData: {
          columns: ['d', '借出', '借入'],
          rows: [
            { 'd': '1/1', '借出': 1393, '借入': 1093},
            { 'd': '1/2', '借出': 3530, '借入': 3230},
            { 'd': '1/3', '借出': 2923, '借入': 2623},
            { 'd': '1/4', '借出': 1723, '借入': 1423},
            { 'd': '1/5', '借出': 3792, '借入': 3492},
            { 'd': '1/6', '借出': 4593, '借入': 4293}
          ]
        },
        chartExtend: {
          color: ['#07AB6E', '#E83E25', '#1B92FB', '#FC8E2D']
        },
        histogramExtend: {
          color: ['#E83E25', '#07AB6E']
        },
        loading: true,
        dataEmpty: true,
        tenantId: '',
        editableTabs: [],
        index:0,
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 50,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        params: {
          validityType: ''
        }
      }
    },
    components: {
      AddOrUpdate, QueryModel
    },
    watch:{
      params(){
        this.$nextTick(() => {
          this.getDataList()
        })
      }
    },
    methods: {
      init(tenantId){
        this.tenantId = tenantId
        this.getDataList()
        this.$nextTick(_ => {
          this.$refs.ring.echarts.resize()
          this.$refs.histogram.echarts.resize()
        })
      },
      setParams(params){
        let _params = this.params
        this.params = merge(params, _params)
      },
      updateParams(validityType){
        this.params.validityType = validityType
        this.getDataList()
      },
      dateFormat(row, column, cellValue, index){
        return cellValue? cellValue.substring(0,10):''
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/list'),
          method: 'get',
          params: this.$http.adornParams(merge(this.params,{
            'page': this.pageIndex,
            'limit': this.pageSize,
            'tenantId': this.tenantId
          }))
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      queryHandle(){
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      }
    }
  }
</script>
<style lang="scss">
  .iconPro {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .queryForm{
    margin-top: 10px;
  }
  .queryForm .el-form-item{
    margin-bottom: 0px;
  }
  .el-button--danger {
    color: #f56c6c;
    background-color: #fff;
    border-color: #f56c6c;
  }
  .el-button--warning {
    color: #fc8e2d;
    background-color: #fff;
    border-color: #fc8e2d;
  }
</style>
